<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-2.1.0.js"></script>
	</head>

	<body>
		<div id="c_body">
			<div id="id_div">
				<input type="text" name="search" class="c_search" />
				<span class="c_span">搜索</span>
			</div>
		</div>
	</body>
	<style>
		* {
			padding: 0px;
			margin: 0px;
		}
		
		#c_body {
			height: 10000px;
			width: 100%;
			position: relative;
		}
		
		#c_body div {
			width: 0 auto;
			text-align: center;
			margin-top: 100px;
			position: absolute;
		}
		
		.c_span {
			background-color: red;
			color: #FFffff;
			margin-top: 30px;
		}
	</style>
	<script>
		$(function() {
			var divtop = parseInt($("#id_div").offset().top);
			alert(1);
			$(window).scroll(function() {
				var divleft = parseInt($("#id_div").offset().left);
				var scrolls = parseInt($(document).scrollTop());

				if(divtop < scrolls) {
					var divOffset = {
						left: divtop,
						top: parseInt(10) + scrolls
					};
					$("#c_body :first-child").offset(divOffset);
				}

			});
			$("#c_body").scroll();
		});
	</script>

</html>